<template>
<div>

	<content_top title="站内信消息"></content_top>
	
	<div class="g_box">
		<div class="g_head">
			<h3>筛选查询</h3>
			<div class="g_box_right">
				<ButtonGroup class="g_act_box">
					<Button @click="qurey">查询结果</Button>
				</ButtonGroup>
				<div class="g_other">
					<a>收起筛选</a>
				</div>
			</div>
		</div>
		<div class="g_box_con" style="padding:20px;">
			<Form  :label-width="90" style="width: 100%" inline>
				<FormItem label="消息标题：">
					<Input v-model="filter.title" placeholder="消息标题" style="width: 180px"></Input>
				</FormItem>
				<FormItem label="发布人员：">
					<Input v-model="filter.user_name" placeholder="全部" style="width: 180px"></Input>
				</FormItem>
				<FormItem label="发布时间">
					<DatePicker :value="filter.date" type="month" placeholder="请选择日期" style="width: 180px" @on-change="month_change"></DatePicker>
				</FormItem>
			</Form>
		</div>
	</div> 
	
	<div class="g_box">
		<div class="g_head">
			<h3>数据列表</h3>
			<div class="g_box_right">
				<ButtonGroup class="g_act_box">
					<Button @click="add">发布消息</Button>
				</ButtonGroup>
			</div>
		</div>
		<div class="g_box_con">
			<Table :columns="Columns" :data="list" :border="true" ref="table"></Table>
			<div style="font-size: 14px;overflow: hidden;padding: 10px;">
				<div style="float:left;">
					<Button @click="batch_action">批量删除</Button>
				</div>
				<div style="float:right;">
					<Page :total="count" show-elevator show-total @on-change="goto_page" />
				</div>
			</div>
		</div>
	</div>
<!-- 引入记账 -->
	<Modal
        v-model="show"
        title="查看消息"
		:width="700"
        >
		<div style="padding: 20px;">
        	<div style="text-align:center;">
				<h2 style="font-weight: normal;">{{info.title}}</h2>
				<p style="margin:20px 0;font-size: 14px;">{{info.date}}</p>
			</div>
			<p style="padding: 20px 0px 50px;border-top:1px solid #e4e4e4;">{{info.content}}</p>
		</div>
	</Modal>
	
	<info v-model="einfo.show"></info>
</div>
</template>

<script>
import info from './info';

export default {
    name: 'station_list',
    data () {
		let self = this;
        return {
			einfo:{
				show:false,
				info:{}
			},
            Columns: [
				{
					type: 'selection',
					width: 80,
					align: 'center'
				},
				{
					title: '编号',
					key: 'id',
					align: 'center',
                    width: 100,
                },
				{
                    title: '消息标题',
					key: 'title',
					width: 400,
					align:'center',
                },
				{
                    title: '发布时间',
					key: 'addtime',
					width: 150,
					align:'center',
                },
				{
                    title: '发布人员',
					key: 'user_name',
					width: 150,
					align:'center',
                },
				{
                    title: '接收对象',
					key: 'target_name',
					width: 150,
					align:'center',
                },
				{
					title:'操作',
					key: 'action',
					align:'center',
					render: (h, params) => {
						return h('div', [
							h('Button', {
								props: {
									type: 'info',
									size: 'small',
									icon:'trash-a'
								},
								style: {
									marginRight: '5px',
								},
								on: {
									click: () => {
										this.look_data(params.row)
									}
								}
							}, '查看'),
							h('Button', {
								props: {
									type: 'info',
									size: 'small',
									icon:'trash-a'
								},
								style: {
									marginRight: '5px',
								},
								on: {
									click: () => {
										this.remove(params.row.id)
									}
								}
							}, '删除')
						]);
					}
				}
            ],
			list:[],
			show: false,
			info:{
				title:'',
				date:'',
				content:'',
			},
			filter:{
				title:'',
				user_name:'',
				date:'',
				type:1
			},
			companyList:[],
			count:0,
			page:1,
			size:10,
			batch_act: '',
        };
	},
	components:{
		info,
	},
	created(){
		
		this.load_data();
	},
    computed: {
       
    },
	methods:{
		
		load_data(){
			
			var self = this;
			var postdata = {
				page: this.page,
				f: this.filter,
			}
			
			Whttp.load('System/Message/get_list',postdata,function(result){
				self.list = result.list;
				self.count = parseInt(result.count);
			});
		},
		qurey(){
			this.page = 1;
			this.load_data();
		},
		goto_page(page){
			this.page = page;
			this.load_data();
		},
		look_data(row){
			this.info = row;
			this.show = true;
		},
		month_change(date){
			this.filter.date =  date;
		},
		add(){
			this.einfo.info = {};
			this.einfo.show = true;
		},
		remove(id){
			var self = this;
			if(!confirm('是否删除')){
				return false;
			}
			var postdata = {
				id:id
			};
			Whttp.load('System/Message/del',postdata,function(result){
				self.load_data();
				self.$Message.info('删除成功');
			});
		},
		batch_action(){
			var ids = [];
			if(this.batch_act=='delete'){
				if(!confirm('是否批量删除')){
					return false;
				}
			}
			
			var sels = this.$refs['table'].getSelection();
			
			for(var i=0;i<sels.length;i++){
				ids.push(sels[i].id);
			}
			
			var self = this;
			var postdata = {
				ids:ids,
				act:this.batch_act
			};
			Whttp.load('System/Message/batch_act',postdata,function(result){
				self.load_data();
				self.$Message.info('操作成功');
			});
			
			
		}
	}
};
</script>
<style scoped>
.price{
	color: red;
    margin: 0 5px;
}
</style>